<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   <%-- <script src="js/vue.min.js"/>--%>
    <script src="js/axios.min.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{

            background-color: rgb(29, 67, 89);
        }
        .box{
            width: 96%;
            height: 91%;
            background: url(./imges/bj.jpg) no-repeat;
            background-size: 90% 100%;
            position: absolute;
            right: 15%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 20px;
            background-color: #fff;
        }

.login-wrapper{
    width: 300px;
    height: 200px;
    float: right;
    margin-top: 138px;
    margin-right: 235px;

}

h1{
    margin-top: 50px;
}

        .login-btn{
            width: 100px;
            height: 50px;
            border-radius: 10px;
            background-color: #fff;
            color: deepskyblue;
        }
        .input-item{
            margin-top: 5px;
            width:350px;
            height: 50px;
            font-size: 14px;
            border-radius: 40px;
            border-color: #dddddd;

        }
        .input-item:hover{
            border-color: #23262e;
        }
        .form-item{
            margin-top: 15px;
        }
        .login-btn{
            margin-top: 20px;
        }
        .avatar_box{
            border-radius: 20px;
        }
        .forgotPassword:hover {
            text-decoration: underline;
            color: #13ce66;
            cursor: pointer;
        }
        .forgotPassword{
            margin-top: -10px;
            color: #A6ACAF;
        }
    </style>
</head>
<body>
<div id="app" class="box">
    <div  class="login-wrapper">
        <div class="avatar_box">
            <img src="./imges/logo.png" alt="" style="width: 80px; height: 80px;border-radius: 20px" >
        </div>
        <el-form :model="loginForm" label-width="0px" class="login-form">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username"  prefix-icon="el-icon-user-solid" placeholder="用户名" class="input-item"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input @keyup.enter.native="login" type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="密码" class="input-item"></el-input>
            </el-form-item>
            <div class="btns">
                <div class="form-item">
                    <el-button size="medium" type="primary" @click="login" class="login-btn">登录</el-button>
                    <el-button size="medium" type="info" @click="loginForm={}" class="login-btn">重置</el-button>
                </div>

            </div>
            <div style="text-align: right;">
                <span class="forgotPassword" @click="forget">忘记密码？</span>
            </div>
        </el-form>


       <%-- <!----忘记密码---->
        <el-dialog title="修改密码" :visible.sync="editPassword" center width="50%">
            <el-form :model="ruleForm" status-icon &lt;%&ndash;:rules="rules" ref="ruleForm"&ndash;%&gt; label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" prop="staffno">
                    <el-input type="text"  autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass">
                    <el-input type="password" v-model="newpass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="pass">
                    <el-input type="password" v-model="pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    &lt;%&ndash;<el-button @click="resetForm">重置</el-button>&ndash;%&gt;
                </el-form-item>
            </el-form>
        </el-dialog>--%>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            loginForm: {
                username:"",
                password:"",
            },
            editPassword:false,
            ruleForm:{}
        },
        methods: {
            login() {
                axios.post("/login/all", this.loginForm).then(res => {
                    if (res.data.code === 200) {
                        app.$message.success(res.data.msg);
                        location.href = "main.jsp";
                    } else {
                        app.$message.error(res.data.msg);
                    }
                })
            },
            forget(){
                this.editPassword=true
            },
            submitForm(){

            }

        }
    })
</script>
</html>
